<template>
  <view class="container">
    <view class="fishing-bg">
      <view class="joystick-container">
        <canvas
          id="joystick"
          type="2d"
          class="joystick-canvas"
          style="width: 200px; height: 200px;"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
        ></canvas>
      </view>

      <view class="status-info">
        <text>方向: {{ direction }}</text>
        <text>力度: {{ power.toFixed(1) }}%</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      centerX: 0,
      centerY: 0,
      radius: 60,
      stickRadius: 30,
      isTouching: false,
      touchX: 0,
      touchY: 0,
      direction: "中间",
      power: 0,
    };
  },
  onReady() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#joystick")
        .node()
        .exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext("2d");

          // ✅ 设置 DPR 分辨率
          const dpr = uni.getSystemInfoSync().pixelRatio;
          const width = 200;
          const height = 200;
          canvas.width = width * dpr;
          canvas.height = height * dpr;
          ctx.scale(dpr, dpr);

          this.canvas = canvas;
          this.ctx = ctx;
          this.centerX = width / 2;
          this.centerY = height / 2;

          this.drawJoystick();
        });
    },

    drawJoystick() {
      const ctx = this.ctx;
      if (!ctx) return;

      ctx.clearRect(0, 0, 200, 200);

      // 绘制外圆
      ctx.beginPath();
      ctx.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(0,0,0,0.2)";
      ctx.fill();
      ctx.strokeStyle = "rgba(0,0,0,0.2)";
      ctx.lineWidth = 2;
      ctx.stroke();

      // 内圆（摇杆）
      let stickX = this.centerX;
      let stickY = this.centerY;

      if (this.isTouching) {
        const dx = this.touchX - this.centerX;
        const dy = this.touchY - this.centerY;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance > this.radius - this.stickRadius) {
          const scale = (this.radius - this.stickRadius) / distance;
          stickX = this.centerX + dx * scale;
          stickY = this.centerY + dy * scale;
        } else {
          stickX = this.touchX;
          stickY = this.touchY;
        }

        this.updateStatus(dx, dy, distance);
      }

      ctx.beginPath();
      ctx.arc(stickX, stickY, this.stickRadius, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(0,0,0,.3)";
      ctx.fill();
      ctx.strokeStyle = "rgba(0,0,0,.3)";
      ctx.lineWidth = 2;
      ctx.stroke();
    },

    updateStatus(dx, dy, distance) {
      this.power = Math.min((distance / (this.radius - this.stickRadius)) * 100, 100);
      const angle = Math.atan2(dy, dx) * 180 / Math.PI;
      if (distance < 10) {
        this.direction = "中间";
      } else if (angle > -22.5 && angle <= 22.5) {
        this.direction = "右";
      } else if (angle > 22.5 && angle <= 67.5) {
        this.direction = "右下";
      } else if (angle > 67.5 && angle <= 112.5) {
        this.direction = "下";
      } else if (angle > 112.5 && angle <= 157.5) {
        this.direction = "左下";
      } else if (angle > 157.5 || angle <= -157.5) {
        this.direction = "左";
      } else if (angle > -157.5 && angle <= -112.5) {
        this.direction = "左上";
      } else if (angle > -112.5 && angle <= -67.5) {
        this.direction = "上";
      } else if (angle > -67.5 && angle <= -22.5) {
        this.direction = "右上";
      }
    },

    onTouchStart(e) {
      this.isTouching = true;
      this.touchX = e.touches[0].x;
      this.touchY = e.touches[0].y;
      this.drawJoystick();
    },
    onTouchMove(e) {
      this.touchX = e.touches[0].x;
      this.touchY = e.touches[0].y;
      this.drawJoystick();
    },
    onTouchEnd() {
      this.isTouching = false;
      this.power = 0;
      this.direction = "中间";
      this.drawJoystick();
    },
  },
};
</script>


<style scoped>
.container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.fishing-bg {
    width: 100%;
    height: 100%;
    position: relative;
}

.bg-img {
    width: 100%;
    height: 100%;
}

/* 摇杆容器固定在右下角 */
.joystick-container {
    position: fixed;
    left: 30rpx;
    bottom: 30rpx;
    width: 200px;
    height: 200px;
}

.joystick-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* background-color: red; */
}

/* 状态信息显示 */
.status-info {
    position: fixed;
    top: 50rpx;
    left: 50rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}
</style>